@use "sass:color";
@use "sass:math";

@use '../tools/colors';
@use '../tools/variables';

.toolbar {
  display: flex;
  flex-direction: row;
  position: relative;
  width: 100%;

  &--dark {
    &.toolbar {
      &--bottom {
        border-top: 1px solid colors.$dark-blue;
      }

      &--top {
        border-bottom: 1px solid colors.$dark-blue;
      }
    }

    .toolbar {
      &__item {
        &--button {
          color: color.adjust(colors.$foreground, $lightness: -10%);

          &:hover {
            color: color.adjust(colors.$foreground, $lightness: 10%);

            .icon {
              fill: color.adjust(colors.$foreground, $lightness: 10%);
            }
          }
        }

        .icon {
          display: inline-block;
          fill: color.adjust(colors.$foreground, $lightness: -15%);
          height: 10px;
          transition: fill 0.25s;
          vertical-align: middle;
          width: 10px;
        }
      }
    }
  }

  &__item {
    user-select: none;

    &--button {
      flex: 1 1 auto;
      font-size: 0.65rem;
      opacity: 1;
      position: relative;
      text-align: center;
      transition: color 0.25s, opacity 0.25s, visibility 0.25s;
      visibility: visible;
      z-index: 1;

      > button {
        font-size: inherit;
        text-align: inherit;

        &:focus {
          outline: none;
          -webkit-tap-highlight-color: transparent;
        }

        &:focus-visible {
          outline: dashed;
        }
      }

      &.is-disabled {
        cursor: default;
        opacity: 0;
        visibility: hidden;
      }

      &:first-child {
        text-align: left;
      }

      &:last-child {
        text-align: right;

        .icon {
          margin-left: math.div(variables.$spacing-unit * 1, 5);
          margin-right: 0;
        }
      }

      .icon {
        margin-bottom: 2px;
        margin-right: math.div(variables.$spacing-unit * 1, 5);
      }
    }

    &--centered {
      display: inline-block;
      left: 50%;
      padding: inherit;
      position: absolute;
      text-align: center;
      top: 0;
      transform: translateX(-50%);
      white-space: nowrap;
      width: auto;
      z-index: 2;
    }

    &--label {
      flex: 1 1 auto;
      text-align: center;
    }
  }
}
